<template>
    <div class="console">
        <a-layout class="console-body">
            <a-layout-header class="header-content">
                <div class="header-logo">
                    <img class="logo" src="@/assets/images/data-logo.png" alt />
                </div>
                <div class="header-user">
                    <a-dropdown :trigger="['hover']" @click="e => e.preventDefault()" style="minWidth: 100px;height:50px;">
                        <div style="display:inline-block">
                            <img src="@/assets/images/head-img.png" alt />
                            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                {{cname}}
                                <a-icon type="down" />
                            </a>
                        </div>
                        <a-menu slot="overlay" class="sys-opts">
                            <!-- <a-menu-item key="0" @click="settings">设置</a-menu-item> -->
                            <a-menu-item @click="logout" key="1">退出</a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
                <div class="console-name">
                    <h1>文本撰写助手</h1>
                </div>
            </a-layout-header>
            <a-layout-content class="main-content">
                <div class="content" ref="content">
                    <a-row>
                        <a-col :span="17">
                            <h3>黑暴”一日不除，香港一日分析报告</h3>
                            <h5>
                                <span>来源：新华网</span>
                                <span>类型：类型名称</span>
                                <span>2020-05-06</span>
                            </h5>
                            <hr />
                            <div class="detail-content" v-html="content"></div>
                        </a-col>
                        <a-col :span="7">
                            <h4><i class="iconfont suncnui-icon-xiangsiredian"></i>相似热点</h4>
                            <div class="changeList" @click="changeList">
                                换一批（{{page}}/5）
                            </div>
                            <div>
                                <SearchListItem @openLink='openLink' :data="list[0]">
                                    <template v-slot:tips>1</template>
                                </SearchListItem>
                                <SearchListItem :data="list[0]">
                                    <template v-slot:tips>1</template>
                                </SearchListItem>
                                <SearchListItem :data="list[0]">
                                    <template v-slot:tips>1</template>
                                </SearchListItem>
                                <SearchListItem :data="list[0]">
                                    <template v-slot:tips>1</template>
                                </SearchListItem>
                            </div>
                            <h4><i class="iconfont suncnui-icon-qingganfenxi"></i>情感分析</h4>
                            <emotionEcharts ref="echarts09" id="echarts09" :data="echarts04Data"></emotionEcharts>
                        </a-col>
                    </a-row>
                </div>
            </a-layout-content>
        </a-layout>
    </div>
</template>

<script>
import { outlogin, getUserInfo } from "@/api/login";
import { mapState, mapGetters, mapMutations } from "vuex";
import SearchListItem from "@/components/base/searchListItem";
import emotionEcharts from "@/components/configuration/messageDetail/emotionEcharts";
export default {
    components: {
        SearchListItem,
        emotionEcharts
    },
    data() {
        return {
            cname: JSON.parse(localStorage.getItem("userInfo")).cname,
            content: "<p>ceshi</p>",
            list: [
                {
                    title: "提振内需大合唱 擦亮城市新招牌提振内需大",
                    content:
                        "企业家是经济活动的重要主体。改革开放以来，一大批优秀企业家在市场竞争中迅速成长，一大批具有核心竞争力的企业不断涌现，为积累社会财富、创造就业岗位促进经济社会发展、增强综合国力作出了重要贡献增强综合国力作出了重要贡献...",
                    img: "",
                    source: "",
                    id: "",
                },
            ],
            echarts04Data: [
                {
                    id: 1,
                    name: "正向",
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
                {
                    id: 1,
                    name: "中立",
                    data: [123, 345, 678, 111, 2367, 1234, 890],
                },
                {
                    id: 1,
                    name: "负向",
                    data: [11, 234, 123, 765, 111, 345, 104],
                },
            ],
            page:1,
            
        };
    },
    watch: {},
    mounted() {},
    methods: {
        ...mapMutations({
            setBackbtn: "SET_BACKBTN",
        }),
        //点击注销
        logout() {
            outlogin()
                .then((res) => {
                    //登出
                    localStorage.removeItem("TOKEN");
                    localStorage.removeItem("refreshToken");
                    localStorage.removeItem("userInfo");
                    localStorage.removeItem("permission");
                    localStorage.removeItem("userType");
                    this.$router.push("/login");
                    this.$message.destroy();
                    this.$message.success(res.msg);
                })
                .catch((err) => {
                    this.$message.destroy();
                    this.$message.error(err);
                });
        },
        openLink(data){
            const { href } = this.$router.resolve({
                path: data.url,
            });
            window.open(href, "_blank");
        },
        changeList(){
            this.page == 5?this.page = 1:this.page++
        }
    },
    computed: {
        ...mapGetters(["userInfo"]),
        ...mapState(["isShowbackBtn"]),
    },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.console {
    height: 100%;
    position: relative;

    .ant-layout-header {
        padding: 0 20px;
        height: 164px;
        background: url('../../assets/images/text-header-bg.png') no-repeat;
        background-size: cover;
        font-size: 16px !important;
    }

    .ant-menu-dark, .ant-menu-dark .ant-menu-sub {
        background: rgba(255, 255, 255, 0);
    }

    .console-body {
        height: 100%;

        .header-content {
            position: relative;
            width: 100%;

            .header-logo {
                position: absolute;
                left: 30px;
                top: 15px;
            }

            .header-user {
                position: absolute;
                right: 15px;
                top: 15px;

                img {
                    width: 30px;
                    height: 30px;
                    display: inline-block;
                    border-radius: 50%;
                    margin-right: 5px;
                }
            }

            .console-name {
                h1 {
                    font-size: 28px;
                    color: #fff;
                    text-align: center;
                    margin-top: 6px;
                    font-weight: bold;
                    text-shadow: 0 2px 9px #9cadbd;
                }
            }
        }

        .main-content {
            position: absolute;
            top: 88px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 98%;
            background: #ffffff;
            border-radius: 5px 5px 0 0;
            height: calc(100% - 88px);
            z-index: 10;

            .content {
                display: flex;
                height: 100%;
                width: 100%;
                overflow: hidden;
                box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
                position: absolute;
                border-radius: 5px 5px 0 0;

                .ant-row {
                    width: 100%;
                    height: 100%;

                    /deep/.ant-col-17 {
                        height: 100%;
                        padding: 40px 30px;
                        background-color: #fff;

                        >h3 {
                            font-size: 32px;
                            color: #333333;
                            text-align: center;
                        }

                        >h5 {
                            font-size: 14px;
                            color: #666666;
                            text-align: center;

                            span {
                                margin: 0 25px;
                            }
                        }

                        >hr {
                            background-color: #ececec;
                            height: 1px;
                            width: 100%;
                            border: none;
                            margin-top: 16px;
                            margin-bottom: 16px;
                        }
                    }

                    /deep/.ant-col-7 {
                        background-color: #f9f9f9;
                        height: 100%;
                        padding: 0px 20px;
                        overflow auto
                        padding-bottom 20px;
                        position relative
                        >.changeList{
                            position absolute;
                            top 20px;
                            right 20px;
                            font-size 14px;
                            color #099ade
                            cursor pointer
                        }
                        >h4{
                            font-size 16px;
                            color #333333;
                            padding-top 20px
                            margin-bottom 10px
                            i{
                                padding-right 10px
                            }
                        }
                        /deep/ .search-list-item {
                            padding: 22px 0;
                        }
                    }
                }
            }
        }
    }
}
</style>
